import exp from 'constants'
import * as _ from 'lodash'

// import { debounce, generateUUID } from '@utils/helpers'



class RandomDrawing {


  // 获取所有的学生标签li
  public stus: NodeListOf<HTMLLIElement> = document.querySelectorAll('li')
  // 获取秒数显示的dom
  public countDownDom: HTMLDivElement = document.querySelector('.countdown') as HTMLDivElement
  // 获取开始按钮的dom
  public startBtn: HTMLButtonElement = document.querySelector('.btn-start') as HTMLButtonElement
  // 获取结束按钮的dom
  public endBtn: HTMLButtonElement = document.querySelector('.btn-end') as HTMLButtonElement
  // 定义settimeout唯一值
  public setTimeOutId: NodeJS.Timeout | undefined
  // 定义setIntervalt唯一值
  public setIntervalId: NodeJS.Timeout | undefined
  public initSNum: number = 9
  // 定义显示倒计时的秒数
  public sNum: number


  constructor(initSNum: number = 9) {

    this.sNum = initSNum
    this.countDownDom.innerText = String(this.sNum)
  }



  initListene() {
    // 给开始按钮加上 点击事件
    this.startBtn.addEventListener('click', _.debounce(() => {
      this.startBtnHandler()
    }, 250))


    // this.startBtn.addEventListener('click', this.startBtnHandler.bind(this))


    // 给结束按钮加上 点击事件
    this.endBtn.addEventListener('click', () => {
      this.initClear()
    })
  }

  //时间倒计时
  countDown() {
    this.setIntervalId = setInterval(() => {
      console.log(this.sNum);
      // 把倒计时的秒数显示到页面上
      this.countDownDom.innerText = String(this.sNum)
      this.sNum--
      // 判断是否小于等于0 清除定时任务
      if (this.sNum <= 0) {
        this.initClear()
      }

    }, 1000);
  }


  // 清除定时任务 并初始化
  initClear() {
    clearInterval(this.setIntervalId)
    clearTimeout(this.setTimeOutId)

    // 初始化
    // setTimeOutId = null
    // 定义setIntervalt唯一值
    // setIntervalId = null
    // 定义显示倒计时的秒数
    this.sNum = this.initSNum
    this.countDownDom.innerText = String(this.sNum)

  }



  // 清除 所有学生的 active 类名效果
  clearStuActiveAll() {
    this.stus.forEach(stu => {
      stu.classList.remove('active')
    });
  }

  // 随记抽取学生添加选中效果   
  setRandomStuAddActive() {

    console.log(this, '#this');


    this.clearStuActiveAll()

    // 随记获取一名学生对应的索引值
    let rand = Math.floor(Math.random() * this.stus.length)  // 0.234  ~ 20.234234 => 向下取整  0~20
    this.stus[rand].classList.add('active')

    // this.setTimeOutId = setTimeout(this.setRandomStuAddActive, 100);
    this.setTimeOutId = setTimeout(() => {
      // console.log(this);

      this.setRandomStuAddActive()

    }, 100);
  }

  // document.addEventListener('事件',执行函数)

  startBtnHandler() {

    this.countDown()
    this.setRandomStuAddActive()
  }


}

export default RandomDrawing



// document.addEventListener('DOMContentLoaded', () => {

//   console.log('打印唯一值', generateUUID());


//   // 获取所有的学生标签li
//   const stus = document.querySelectorAll('li')
//   // 获取秒数显示的dom
//   const countDownDom = document.querySelector('.countdown') as HTMLDivElement
//   // 获取开始按钮的dom
//   const startBtn = document.querySelector('.btn-start') as HTMLButtonElement
//   // 获取结束按钮的dom
//   const endBtn = document.querySelector('.btn-end') as HTMLButtonElement
//   // 定义settimeout唯一值
//   let setTimeOutId: NodeJS.Timeout
//   // 定义setIntervalt唯一值
//   let setIntervalId: NodeJS.Timeout
//   const initSNum = 9
//   // 定义显示倒计时的秒数
//   let sNum = initSNum
//   countDownDom.innerText = String(sNum)


//   //时间倒计时
//   const countDown = () => {
//     setIntervalId = setInterval(() => {
//       console.log(sNum);
//       // 把倒计时的秒数显示到页面上
//       countDownDom.innerText = String(sNum)
//       sNum--
//       // 判断是否小于等于0 清除定时任务
//       if (sNum <= 0) {
//         initClear()
//       }

//     }, 1000);
//   }


//   // 清除定时任务 并初始化
//   function initClear() {
//     clearInterval(setIntervalId)
//     clearTimeout(setTimeOutId)

//     // 初始化
//     // setTimeOutId = null
//     // 定义setIntervalt唯一值
//     // setIntervalId = null
//     // 定义显示倒计时的秒数
//     sNum = initSNum
//     countDownDom.innerText = String(sNum)

//   }



//   // 清除 所有学生的 active 类名效果
//   function clearStuActiveAll() {
//     stus.forEach(stu => {
//       stu.classList.remove('active')
//     });
//   }

//   // 随记抽取学生添加选中效果
// const setRandomStuAddActive = () => {

//   clearStuActiveAll()
//   // 随记获取一名学生对应的索引值
//   let rand = Math.floor(Math.random() * stus.length)  // 0.234  ~ 20.234234 => 向下取整  0~20
//   stus[rand].classList.add('active')

//   setTimeOutId = setTimeout(setRandomStuAddActive, 100);
// }

//   // document.addEventListener('事件',执行函数)

//   let startBtnHandler = () => {
//     countDown()
//     setRandomStuAddActive()
//   }












// });

